<template>
	<div v-waterMarker class="merak-float">
		<div class="header">
			<div class="leftTitle">
				<div class="icon" @click="emit('close',state.refresh)">
					<el-icon size="20">
						<ArrowLeft />
					</el-icon>
				</div>
				<div class="title">添加企发销售属性</div>
			</div>
			<div class="btnBox">
				<el-button type="primary" plain
					@click="submitForm(ruleFormRef,true)">{{ $t("merak.save_continue") }}</el-button>
				<el-button type="primary" @click="submitForm(ruleFormRef,false)">{{ $t("merak.save") }}</el-button>
			</div>
		</div>
		<div class="content">
			<div class="merak-float-overflow-y">
				<el-form ref="ruleFormRef" labelPosition="top" :model="ruleForm" :rules="rules">
					<div class="group">
						<div class="titleHeader" @click="state.basicsMsg = !state.basicsMsg">
							<el-icon size="16" v-if="state.basicsMsg">
								<CaretRight />
							</el-icon>
							<el-icon size="16" v-else>
								<CaretBottom />
							</el-icon>
							<div class="group-title">基础信息</div>
						</div>
						<el-row :gutter="40" v-if="!state.basicsMsg">
							<el-col :span="6">
								<el-form-item label="商品类型" prop="type_id">
									<el-select class="qf_select" placeholder="请选择" v-model="ruleForm.type_id">
										<el-option :label="item?.label" :value="item?.value"
											v-for="item in opstionsObjs?.goodsTypeArr" :key="item?.value" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="属性名称(俄文)" prop="property" :error="newRules.property">
									<el-input class="qf_input" type="text" v-model="ruleForm.property" />
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="属性名称(中文)" prop="property_cn" :error="newRules.property_cn">
									<el-input class="qf_input" type="text" v-model="ruleForm.property_cn" />
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="属性名称(英文)" prop="property_en" :error="newRules.property_en">
									<el-input class="qf_input" type="text" v-model="ruleForm.property_en"
										@blur="editProperty" />
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="属性类型" prop="prop_type">
									<el-select class="qf_select" placeholder="请选择" v-model="ruleForm.prop_type" @change="showTable">
										<el-option :label="item?.label" :value="item?.value"
											v-for="item in opstionsObjs?.propType" :key="item?.value" />
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="详情页属性排序">
									<el-input class="qf_input" type="text" v-number
										v-model="ruleForm.prop_sort_detail" />
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="列表页属性排序">
									<el-input class="qf_input" type="text" v-number
										v-model="ruleForm.prop_sort_filter" />
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="详情页重点属性排序">
									<el-input class="qf_input" type="text" v-number
										v-model="ruleForm.sort_prop_detail_focal" />
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="详情页是否重点展示">
									<el-radio-group v-model="ruleForm.display_detail_focal">
										<el-radio value="1">{{$t('merak.yes')}}</el-radio>
										<el-radio value="0">{{$t('merak.no')}}</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="详情页是否展示">
									<el-radio-group v-model="ruleForm.display_detail">
										<el-radio value="1">{{$t('merak.yes')}}</el-radio>
										<el-radio value="0">{{$t('merak.no')}}</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="列表页是否参与筛选">
									<el-radio-group v-model="ruleForm.display_filter">
										<el-radio value="1">{{$t('merak.yes')}}</el-radio>
										<el-radio value="0">{{$t('merak.no')}}</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="是否必填">
									<el-radio-group v-model="ruleForm.is_required">
										<el-radio value="1">{{$t('merak.yes')}}</el-radio>
										<el-radio value="0">{{$t('merak.no')}}</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="是否是规格" v-if="props.type != 'industrial'">
									<el-radio-group v-model="ruleForm.is_spec">
										<el-radio value="1">{{$t('merak.yes')}}</el-radio>
										<el-radio value="0">{{$t('merak.no')}}</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="是否参与搜索">
									<el-radio-group v-model="ruleForm.is_search">
										<el-radio value="1">{{$t('merak.yes')}}</el-radio>
										<el-radio value="0">{{$t('merak.no')}}</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="是否数值类型">
									<el-radio-group v-model="ruleForm.is_number">
										<el-radio value="1">{{$t('merak.yes')}}</el-radio>
										<el-radio value="0">{{$t('merak.no')}}</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
							<el-col :span="6">
								<el-form-item label="审核后无法编辑">
									<el-radio-group v-model="ruleForm.un_editable_checked">
										<el-radio value="1">{{$t('merak.yes')}}</el-radio>
										<el-radio value="0">{{$t('merak.no')}}</el-radio>
									</el-radio-group>
								</el-form-item>
							</el-col>
						</el-row>
					</div>
					<div class="group" :class="state.propertyList?'':'group-table'" v-if="isShowTable">
						<div class="group-head">
							<div class="titleHeader" @click="state.propertyList = !state.propertyList">
								<el-icon size="16" v-if="state.propertyList">
									<CaretRight />
								</el-icon>
								<el-icon size="16" v-else>
									<CaretBottom />
								</el-icon>
								<div class="group-title">属性值列表</div>
							</div>
							<div class="btnBox">
								<el-button type="primary" plain @click="addRows">添加枚举值</el-button>
							</div>
						</div>
						<div class="float-table-row" v-if="!state.propertyList">
							<div class="table-box">
								<basicTableSum ref="editTableRef" v-bind="tableConfig" @editFormFun="editFormClick">

									<template #handle="{ row }">

										<el-button type="danger" link @click="delFun(row)">删除</el-button>

									</template>
								</basicTableSum>
							</div>
						</div>
					</div>
				</el-form>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
	import type { FormInstance, FormRules } from "element-plus";
	import { getCurrentInstance, ref, reactive, computed, watch, onMounted } from "vue";
	import basicTableSum from "@/components/MerakEditTable/components/basicTable/moreEdit.vue";
	import { RouteType, editGoodsProperty,addGoodsProperty } from "@/api/modules/goodsArchive/allocation";
	import { failMsg,successMsg } from "@/utils/messageUtils";
	const props = defineProps<{
		type : RouteType;
		propId:"";
		typeId:"";
	}>();
	const ruleFormRef = ref<FormInstance>()
	const editTableRef = ref<FormInstance>()
	
	const ruleForm = reactive({
		"type_id": "",//商品类型
		"property": "",//属性名称(俄文)
		"property_cn": "",//属性名称(中文)
		"property_en": "",//属性名称(英文)
		"prop_type": "",//属性类型
		"prop_sort_detail": "",//详情页属性排序
		"prop_sort_filter": "",//列表页属性排序
		"sort_prop_detail_focal": "",//详情页重点属性排序
		"display_detail_focal": "1",//详情页是否重点展示
		"display_detail": "1",//详情页是否展示
		"display_filter": "1",//列表页是否参与筛选
		"is_required": "0",//是否必填
		"is_spec": "0",//是否是规格
		"is_search": "0",//是否参与搜索
		"is_number": "0",//是否数值类型
		"un_editable_checked": "0"//审核后无法编辑
	})
	const propertyEnValue = ref("")
	//页面的select下拉数据
	const opstionsObjs = reactive({
		goodsTypeArr: [],//商品类型
		propType: [],//属性类型
		nounType: [],//名词性
		isQifa: [
			{
				label: "是",
				value: "1"
			},
			{
				label: "否",
				value: "0"
			}
		]
	})
	//接口返回报错信息
	const newRules = reactive<FormRules<RuleForm>>({})
	//普通为空报错
	const rules = reactive<FormRules<RuleForm>>({
		type_id: [
			{
				required: true,
				message: '不能为空',
				trigger: 'change',
			},
		],
		property: [
			{
				required: true,
				message: '不能为空',
				trigger: 'blur',
			},
		],
		property_cn: [
			{
				required: true,
				message: '不能为空',
				trigger: 'blur',
			},
		],
		property_en: [
			{
				required: true,
				message: '不能为空',
				trigger: 'blur',
			},
		],
		prop_type: [
			{
				required: true,
				message: '不能为空',
				trigger: 'change',
			},
		],
	})
	const emit = defineEmits<{
		close : [refresh: boolean];
	}>();

	const state = reactive<{
		refresh : boolean;
		basicsMsg : boolean;
		propertyList : boolean;

	}>({
		refresh: false,
		basicsMsg: false,
		propertyList: false,
	});

	//category：  noun []名词性  name_for_goods商品使用名称  cat_name目录名称
	//color：  is_qifa []

	//修改英文分类
	const editProperty = () => {
		
		if (ruleForm.property_en == 'category') {
			if(tableConfig.headConfig.cat_name){}else {
				let newHeadArr = [
					{
						title: "名词性",
						field: 'noun'
					},
					{
						title: "商品使用名称",
						field: 'name_for_goods'
					},
					{
						title: "目录名称",
						field: 'cat_name'
					},
				]
				tableConfig.headData = [...tableConfig.headData, ...newHeadArr];
				tableConfig.headData = tableConfig.headData.filter(item => item.field != "is_qifa");
				tableConfig.headConfig.noun = {
					type: "select",
					options: opstionsObjs.nounType
				}
				tableConfig.headConfig.name_for_goods = 'input';
				tableConfig.headConfig.cat_name = 'input';
				if (tableConfig.tableData.length > 0) {
					tableConfig.tableData.map(item => {
						if (item.is_qifa) {
							delete item["is_qifa"];
						}
						item.noun = {
							label: "",
							value: "",
						};
						item.name_for_goods = {
							label: "",
							value: "",
						};
						item.cat_name = {
							label: "",
							value: "",
						};
				
					})
				}
			}
		} else if (ruleForm.property_en == 'color') {
			if(tableConfig.headConfig.is_qifa){}else {
				let newHeadArr = [
					{
						title: "is_qifa",
						field: 'is_qifa'
					}
				]
				tableConfig.headData = [...tableConfig.headData, ...newHeadArr];
				tableConfig.headData = tableConfig.headData.filter(item => item.field != "noun" && item.field != "name_for_goods" && item.field != "cat_name");
				tableConfig.headConfig.is_qifa = {
					type: "select",
					options: opstionsObjs.isQifa
				}
				if (tableConfig.headConfig.noun) {
					delete tableConfig.headConfig["noun"];
				}
				if (tableConfig.headConfig.name_for_goods) {
					delete tableConfig.headConfig["name_for_goods"];
				}
				if (tableConfig.headConfig.cat_name) {
					delete tableConfig.headConfig["cat_name"];
				}
				if (tableConfig.tableData.length > 0) {
					tableConfig.tableData.map(item => {
						if (item.noun) {
							delete item["noun"];
						}
						if (item.name_for_goods) {
							delete item["name_for_goods"];
						}
						if (item.cat_name) {
							delete item["cat_name"];
						}
						item.is_qifa = {
							label: "",
							value: "",
						};
					})
				}
			}
			
		} else {
			tableConfig.headData = tableConfig.headData.filter(item => item.field != "noun" && item.field != "name_for_goods" && item.field != "cat_name" && item.field != "is_qifa");
			if (tableConfig.headConfig.is_qifa) {
				delete tableConfig.headConfig["is_qifa"];
			}
			if (tableConfig.headConfig.noun) {
				delete tableConfig.headConfig["noun"];
			}
			if (tableConfig.headConfig.name_for_goods) {
				delete tableConfig.headConfig["name_for_goods"];
			}
			if (tableConfig.headConfig.cat_name) {
				delete tableConfig.headConfig["cat_name"];
			}
			if (tableConfig.tableData.length > 0) {
				tableConfig.tableData.map(item => {

					if (item.is_qifa) {
						delete item["is_qifa"];
					}
					if (item.noun) {
						delete item["noun"];
					}
					if (item.name_for_goods) {
						delete item["name_for_goods"];
					}
					if (item.cat_name) {
						delete item["cat_name"];
					}
				})
			}
		}
	}
	const addRows = () => {
		editStatusType.value = "add";
		let obj = {
			propvalue_cn: {
				label: "",
				value: "",
			},
			propvalue: {
				label: "",
				value: ""
			},
			propvalue_alias: {
				label: "",
				value: ""
			},
			propvalue_onec: {
				label: "",
				value: ""
			},
			sort_propvalue: {
				label: "",
				value: ""
			},
		};
		if (ruleForm.property_en == 'category') {
			obj.noun = {
				label: "",
				value: "",
			};
			obj.name_for_goods = {
				label: "",
				value: "",
			};
			obj.cat_name = {
				label: "",
				value: "",
			};
		}
		if (ruleForm.property_en == 'color') {
			obj.is_qifa = {
				label: "",
				value: "",
			};
		}
		tableData.value.push(obj)
	}
	const tableHeadData = reactive([]);
	const tableData = ref([]);
	const headConfig = reactive({});//头部配置是否可编辑 
	const editStatusType = ref("");
	const tableConfig = reactive<{
		headData : [];
		tableData : [];
		headConfig : [];
	}>({
		headData: tableHeadData,//表格头部数据   必须值
		tableData: tableData,//表格内容数据      必须值
		headConfig: headConfig,//可编辑列类型    必须值 
	})

	//获取初始化数据
	const initMsg = () => {
		let data = {};
		if(props.propId != ""){
			data.prop_id = props.propId
			data.type_id = props.typeId
		}
		editGoodsProperty(props.type,data).then(({ code, data }) => {
			if (code == 2000) {
				opstionsObjs.goodsTypeArr = data.dataarr.prop;//商品类型
				opstionsObjs.propType = data.dataarr.prop_type;//属性类型
				opstionsObjs.nounType = data.dataarr.noun;//名词性
				
				if(props.propId != "" && props.propId != undefined){
					ruleForm.type_id = props.typeId;
					ruleForm.property = data.defaults.property;
					ruleForm.property_cn = data.defaults.property_cn;
					ruleForm.property_en = data.defaults.property_en;
					ruleForm.prop_type = data.defaults.prop_type;
					ruleForm.prop_sort_detail = data.defaults.prop_sort_detail;
					ruleForm.prop_sort_filter = data.defaults.prop_sort_filter;
					ruleForm.sort_prop_detail_focal = data.defaults.sort_prop_detail_focal;
					ruleForm.display_detail_focal = String(data.defaults.display_detail_focal);
					ruleForm.display_detail = String(data.defaults.display_detail);
					ruleForm.display_filter = String(data.defaults.display_filter);
					ruleForm.is_required = String(data.defaults.is_required);
					ruleForm.is_spec = String(data.defaults.is_spec);
					ruleForm.is_search = String(data.defaults.is_search);
					ruleForm.is_number = String(data.defaults.is_number);
					ruleForm.un_editable_checked = String(data.defaults.un_editable_checked);
					let newArr = [];
					if(data.defaults.prop_type ==1 || data.defaults.prop_type == 2){
						isShowTable.value = true;
						if (data.defaults.property_en == 'category') {
							if(tableConfig.headConfig.cat_name){}else {
								let newHeadArr = [
									{
										title: "名词性",
										field: 'noun'
									},
									{
										title: "商品使用名称",
										field: 'name_for_goods'
									},
									{
										title: "目录名称",
										field: 'cat_name'
									},
								]
								tableConfig.headData = [...tableConfig.headData, ...newHeadArr];
								tableConfig.headData = tableConfig.headData.filter(item => item.field != "is_qifa");
								tableConfig.headConfig.noun = {
									type: "select",
									options: opstionsObjs.nounType
								}
								tableConfig.headConfig.name_for_goods = 'input';
								tableConfig.headConfig.cat_name = 'input';
							}
						} else if (ruleForm.property_en == 'color') {
							if(tableConfig.headConfig.is_qifa){}else {
								let newHeadArr = [
									{
										title: "is_qifa",
										field: 'is_qifa'
									}
								]
								tableConfig.headData = [...tableConfig.headData, ...newHeadArr];
								tableConfig.headData = tableConfig.headData.filter(item => item.field != "noun" && item.field != "name_for_goods" && item.field != "cat_name");
								tableConfig.headConfig.is_qifa = {
									type: "select",
									options: opstionsObjs.isQifa
								}
							}
							
						} 
					}
					if(data.defaults.propvalueList){
						data.defaults?.propvalueList.map(tableItem=>{
							let obj = {
								propvalue_cn: {
									label: tableItem.propvalue_cn,
									value: tableItem.propvalue_cn,
								},
								propvalue: {
									label: tableItem.propvalue,
									value: tableItem.propvalue,
								},
								propvalue_alias: {
									label: tableItem.propvalue_alias,
									value: tableItem.propvalue_alias,
								},
								propvalue_onec: {
									label: tableItem.propvalue_onec,
									value: tableItem.propvalue_onec,
								},
								sort_propvalue: {
									label: tableItem.sort_propvalue,
									value: tableItem.sort_propvalue,
								},
							}
							if (data.defaults.property_en == 'category') {
								
								obj.noun = {
									label: tableItem.noun_text,
									value: tableItem.noun,
								};
								obj.name_for_goods = {
									label: tableItem.name_for_goods,
									value: tableItem.name_for_goods,
								};
								obj.cat_name = {
									label: tableItem.cat_name,
									value: tableItem.cat_name,
								};
							}
							if (data.defaults.property_en == 'color') {
								obj.is_qifa = {
									label: tableItem.is_qifa_text,
									value: tableItem.is_qifa,
								};
							}
							newArr.push(obj)
						})
						tableConfig.tableData = newArr;
					}
					
				}
			}
		})
	}
	const isShowTable = ref(false);
	const showTable = (e) => {
		if(ruleForm.prop_type == 1 || ruleForm.prop_type == 2){
			isShowTable.value = true;
		} else {
			isShowTable.value = false;
		}
		
	}
	const delFun = (e) => {
		tableConfig.tableData.splice(e.index, 1);
	}
	
	const editFormClick = (e) => {
		const idx = e.index;
		const editItem = {};
		Object.assign(editItem, e);
		delete editItem["index"];
		tableConfig.tableData[idx] = editItem;
	}


	const submitForm = async (formEl : FormInstance | undefined,isHide:boolean) => {
		
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			//failMsg('所有的属性值(中文)、属性值(俄文)不能为空')
			if (valid) {
				let tableDataArr = editTableRef.value.submitData();
				if(tableDataArr != ''){
					tableDataArr.map(titem=>{
						if(titem.label == "" || titem.value == ""){
							failMsg('所有的属性值(中文)、属性值(俄文)不能为空')
							return false;
						}
					})
				} else {
					failMsg('请添加属性值内容')
					return false;
				}
				
				let postData = {
					prop:ruleForm,
				}
				if(ruleForm.prop_type == 1 || ruleForm.prop_type == 2){
					postData.propvalue = tableDataArr;
				}
				if(Object.keys(newRules).length > 0){
					Object.keys(newRules).map((key) => {
					  newRules[key] = undefined;
					}); 
				}
				addGoodsProperty(props.type,postData).then(({ code, data,message }) => {
					if (code == 2000) {
						successMsg("添加成功");
						formEl.resetFields();
						ruleForm.prop_sort_detail = "";
						ruleForm.prop_sort_filter = "";
						ruleForm.sort_prop_detail_focal = "";
						tableConfig.tableData = [];
						if(!isHide){
							emit('close',true)
						}
					} else {
						data.map(errorItem =>{
							newRules[errorItem.key] = errorItem.message;
						})
					}
				})
			} else {
				console.log('error submit!', fields)
			}
		})
	}
	onMounted(() => {
		initMsg()
		let tableHead = [{
			title: "属性值(中文)",
			field: 'propvalue_cn'

		}, {
			title: "属性值(俄文)",
			field: 'propvalue'
		}, {
			title: "别名",
			field: 'propvalue_alias'
		},
		{
			title: "propvalue_onec",
			field: 'propvalue_onec'

		},
		{
			title: "排序",
			field: 'sort_propvalue'

		},
		]
		Object.assign(tableHeadData, tableHead);
		let headCon = {
			propvalue_cn: "input",
			propvalue: "input",
			propvalue_alias: 'input',
			propvalue_onec: 'input',
			sort_propvalue: 'input'
		}
		Object.assign(headConfig, headCon);

		let tableDataArr = [
			// {
			// 	propvalue_cn: {
			// 		label: "",
			// 		value: "",
			// 	},
			// 	propvalue: {
			// 		label: "",
			// 		value: ""
			// 	},
			// 	propvalue_onec: {
			// 		label: "",
			// 		value: ""
			// 	},
			// 	sort_propvalue: {
			// 		label: "",
			// 		value: ""
			// 	},
			// },
		];
		tableData.value = tableDataArr;
	})
</script>

<style type="text/css">
	@import "./addCardTwo.scss";
</style>